import { LoadingOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react'
import { showMessage } from '../antd-comp/message'
import ChatInput from './ChatInput'
import MessagePanne from './MessagePanne'
import { useChatStore } from './chatStore'

export default function ChatComponent({
  clear = false,
  questions = [],
  form = false,
  inputForm = null,
  chatUrl,
  assistantId,
  loadMore = () => {},
  conversation = '',
  prompt = '',
  useName = '',
  conversationId = '',
  disabled = false,
  tips = '',
  modelName = '',
  userName = '',
  supportSearch = false
}) {
  const { upIsLoading, setUpIsLoading } = useChatStore()

  useEffect(() => {
    console.log('重置文件上传的loading状态', upIsLoading)
    setUpIsLoading(false)
  }, [])

  // 推荐问题 e = 2 重新生成 : 隐藏
  const [recommendedHid, setRecommendedHid] = useState(true)
  const [uploading, setUploading] = useState(false)
  const regenerate = e => {
    if (disabled) {
      showMessage({
        content: tips,
        type: 'warning'
      })
      return
    }
    if (e === 2) {
      // 重新生成
      if (!recommendedHid) {
        setRecommendedHid(true)
      }
    } else {
      setRecommendedHid(!recommendedHid)
    }
  }
  useEffect(() => {
    if (questions) {
      setRecommendedHid(true)
    }
  }, [questions])
  // 判断会话中 显示icon功能 = 重发 暂停 编辑
  const [chatting, setChatting] = useState('')
  return (
    <div className="relative h-full">
      {/* {upIsLoading && (
        <div className="absolute inset-0 z-50 flex cursor-not-allowed items-center justify-center bg-white bg-opacity-50">
          <div className="chat-file-loading-box">
            <LoadingOutlined style={{ fontSize: 24, color: '#fff', marginBottom: 8 }} spin />
            <div style={{ color: '#fff' }}>上传中</div>
          </div>
        </div>
      )} */}
      <MessagePanne
        chatting={chatting}
        useName={useName}
        recommendedHid={recommendedHid}
        loadMore={loadMore}
        conversation={conversation}
        uploading={uploading}
      ></MessagePanne>
      <ChatInput
        chattingFun={e => {
          setChatting(e)
        }}
        disabled={disabled}
        tips={tips}
        userName={userName}
        recommendedHid={recommendedHid}
        regenerate={regenerate}
        conversationId={conversationId}
        clear={clear}
        prompt={prompt}
        questions={questions}
        form={form}
        chatUrl={chatUrl}
        assistantId={assistantId}
        inputForm={inputForm}
        conversation={conversation}
        modelName={modelName}
        supportSearch={supportSearch}
        setUploading={setUploading}
      ></ChatInput>
    </div>
  )
}
